<template>
	<view style="padding: 20rpx;position: relative;">
		<view class="detail">
			<view class="detail-title">产品</view>
			<view class="goods-title row" style="margin-top: 24rpx;">
				<view class="goods-title-item row-h-center" style="width: 33%;">
					名称
				</view>
				<view class="goods-title-item row-center" style="width: 33%;">
					发货数量
				</view>
				<view class="goods-title-item row-center" style="width: 33%;">
					确认收货数量
				</view>
				<view class="goods-title-item row-h-center" style="width: 33%;">
					确认退货数量
				</view>
			</view>
			<view class="col" v-for="item,index in goods">
				<view class="row-w-center goods-item" style="width: 100%;margin-top: 10rpx;">
					<view class="col" style="width: 25%;">
						<view class="goods-name">鲁花花生油</view>
						<view class="goods-scale">10L<span class="goods-price">¥100.00</span></view>
					</view>
		
				<view class="col-center" style="width: 25%;">
					<view class="goods-num">200</view>
				</view>
					<view class="col-center" style="width: 25%;">
						<view class="goods-num">200</view>
					</view>
		
					<view class="row-h-center" style="width: 25%;align-items: center;">
						<view style="width: 150rpx;">
							<u-input  style="height: 60rpx;"/>
						</view>
						
					</view>
		
				</view>
				<view class="goods-line"></view>
			</view>
		</view>
		
		<view class="col count" >
			<view class="row-h-center">
				<view class="col count-item" style="width: 50%;">
					<view class="count-key">确认收货产品总数</view>
					<view class="count-value">60</view>
				</view>
				<view class="count-line1">
				</view>
				<view class="col count-item" style="width: 50%;">
					<view class="count-key">确认收货总金额</view>
					<view class="count-price">¥6000</view>
				</view>
			</view>
		<view class="count-line2"></view>
		<view class="row-h-center">
			<view class="col count-item" style="width: 50%;">
				<view class="count-key">退货产品总数</view>
				<view class="count-value">60</view>
			</view>
			<view class="count-line1">
			</view>
			<view class="col count-item" style="width: 50%;">
				<view class="count-key">退货总金额</view>
				<view class="count-price">¥6000</view>
			</view>
		</view>
		</view>
			<view class="bottom-line"></view>
		<view class="row-h-center" style="margin-top: 24rpx;">
			<view class="red"></view>
			<view class="reason">退货原因</view>
		</view>
		<u--textarea v-model="value1" placeholder="请输入内容" count maxlength="500" border="none"></u--textarea>
		<view class="bottom-line"></view>
		<view class="bottom row-center" @click="submit">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1:'',
				goods: [{}, {}, {}]
			}
		},
		methods: {
			submit(){
				uni.navigateTo({
					url:'/src/pages/buy/buy_order_confirm'
				})
			}
		}
	}
</script>
<style>
	page{
		background: white;
	}
</style>
<style lang="scss" scoped>
	.bottom-line{
		height: 1rpx  ;
		background-color: #E6E6E6;
	}
	.red{
		background-color:  #FF4F4F;
		width: 10rpx;
		height: 10rpx;
		border-radius: 50%;
	}
	.reason{
		margin-left: 12rpx;
		color: #17161B;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
	.bottom{
		margin-left: 36rpx ;
		margin-right: 32rpx;
		width: calc(100% - 72rpx - 40rpx);
		position: fixed;
		bottom: 20rpx;
		border-radius: 40rpx;
		background: #3B60D3;
		height: 80rpx;
		color: #FFF;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 48rpx; /* 150% */
	}
.detail {
		z-index: 99;
		margin-top: -10rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		background: white;

		.detail-title {
			color: #20252B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx;
			/* 157.143% */
		}

	}
	.goods-title {
		height: 68rpx;
		flex-shrink: 0;
		border-radius: 8rpx;
		background: #F7F8FC;
	
		.goods-title-item {
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}
	
		.goods-total {
			color: #17161B;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx;
			/* 157.143% */
		}
	
		.goods-total-price {
			color: #F5222D;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 44rpx;
			/* 157.143% */
		}
	}
	.goods-item {
		.goods-name {
			color: #20252B;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 40rpx;
			/* 166.667% */
		}
	
		.goods-scale {
			color: #6A6876;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}
	
		.goods-price {
			margin-left: 10rpx;
			color: #FF8934;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx;
			/* 180% */
		}
	
		.goods-num {
			color: #20252B;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 166.667% */
		}
	
		.goods-delete {
			color: #F5222D;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 166.667% */
		}
	
	}
	
	.goods-line {
		margin-top: 20rpx;
		height: 1rpx;
		background: #E6E6E6;
	}
	.count {
		width: calc(100% - 40rpx);
		margin: 20rpx;
		border-radius: 12rpx;
		background: #f7f8fc;
	
		.count-item {
			padding: 30rpx 40rpx;
		}
	
		.count-key {
			color: #6A6876;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;
			/* 166.667% */
		}
	
		.count-value {
			color: #20252B;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 40rpx;
			/* 125% */
		}
	
		.count-price {
			color: #FF8934;
			font-size: 32rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 40rpx;
			/* 125% */
		}
	
		.count-line1 {
			width: 1rpx;
			height: 66rpx;
			background: #E6E6E6;
		}
	
		.count-line2 {
			width: 100%;
			height: 1rpx;
			background: #E6E6E6;
		}
	}
	
</style>
